<template>
    <div class="dropContain">
        <div class="title flex-c-s">
            {{ props.title }}
            <slot></slot>
        </div>
        <div @click.stop="changShow" :style="{ width: props.width, height: props.height }" v-if="props.isRadio"
            class="valBox flex-c-b">
            <div style="flex:1;text-align: left;margin-left: 0.15rem;">{{ selectVal[0] }}</div>
            <img class="downIcon" src="../../assets/down.png" alt="">
            <div v-if="showDropList" :style="{ top: props.height }" class="dropList">
                <div v-for="(item, index) in list" @click.stop="radioClick(item, index)" :key="index"
                    :class="{ 'active': item.active }" class="dropList-part">
                    {{ item.name }}
                </div>
            </div>
        </div>
        <div v-else @click.stop="showDropList = !showDropList" :style="{ width: props.width, height: props.height }"
            class="valBox flex-c-b">
            <div class="values flex-c-s">
                <div @click.stop="" v-for="(item, index) in selectVal" :key="index" class="values-part">
                    {{ item }}
                    <img class="del" @click.stop="onDelete(item, index)" src="../../assets/del.png" alt="">
                </div>
            </div>
            <img class="downIcon" src="../../assets/down.png" alt="">
            <div v-if="showDropList" :style="{ top: props.height }" class="dropList">
                <div v-for="(item, index) in list" @click.stop="multipleClick(item, index)" :index="index+4"
                    :key="index" :class="{ 'active': item.active }" class="dropList-part">
                    {{ item.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref, watch, onMounted } from 'vue'
    import mitt from '@/utils/mitt.js'
    const props = defineProps({
        isRadio: {
            type: Boolean,
            default: true
        },
        title: {
            type: String,
            default: 'title'
        },
        width: {
            type: String,
            default: '5.4rem'
        },
        height: {
            type: String,
            default: '0.5rem'
        },
        list: {
            type: Array,
            default: []
        },
        index: {
            type: Number,
            default: 0
        }
    })
    const selectVal = ref([])
    const list = ref([])
    const showDropList = ref(false)
    watch(() => showDropList.value, (newVal, oldVal) => {
        if (newVal) {
            mitt.emit('closeDrop', { title: props.title, index: props.index })
        }
    })

    onMounted(() => {
        list.value = props.list
        mitt.on('close', index => {
            if (props.index != index) {
                closeDrop()
            }
        })

    })

    watch(() => props.list, (newVal, oldVal) => {
        list.value = props.list
    })
    const changShow = () => {
        showDropList.value = !showDropList.value
        if (showDropList.value && props.index > 3) {
            list.value.map(item => {
                item.active = item.subCode == selectVal.value[0]
            })
        }
    }

    const emits = defineEmits(['selectVal'])
    // 单选
    const radioClick = (item, index) => {
        showDropList.value = false
        list.value.map(item => {
            item.active = false
        })
        item.active = true
        selectVal.value[0] = item.name
        emits('selectVal', {
            value: item,
            index: props.index
        })
    }
    // 多选
    const multipleClick = (item, index) => {
        showDropList.value = false
        item.active = true
        if (!selectVal.value.includes(item.name)) {
            selectVal.value.push(item.name)
        }
        let str = ''
        list.value.map(item => {
            if (item.active) {
                str += item.name + ','
            }
        })
        emits('selectVal', str)
    }
    const onDelete = (item, index) => {
        selectVal.value.splice(index, 1)
        let Findex = list.value.findIndex(v => {
            return v.name == item
        })
        list.value[Findex].active = false
        let str = ''
        list.value.map(item => {
            if (item.active) {
                str += item.name + ','
            }
        })
        emits('selectVal', str)
    }
    const closeDrop = () => {
        showDropList.value = false
    }

    const init = (data) => {
        if (data.type == 'advCode') {
            let index = list.value.findIndex(item => {
                return item.code == data.data
            })
            if (index >= 0) {
                radioClick(list.value[index], index)
            }

        } else if (data.type == 'timeSecond') {

            let index = list.value.findIndex(item => {
                return item.value == data.data
            })
            if (index >= 0) {
                radioClick(list.value[index], index)
            }

        } else if (data.type == 'tags') {
            data.data.map(item => {
                let index = list.value.findIndex(child => {
                    return child.value == item
                })
                if (index >= 0) {
                    multipleClick(list.value[index], index)
                }
            })

        } else if (data.type == 'rules') {
            data.data.map(item => {
                let index = list.value.findIndex(child => {
                    return child.value == item
                })
                if (index >= 0) {
                    multipleClick(list.value[index], index)
                }
            })


        } else if (data.type == 'currency') {
            let index = list.value.findIndex(item => {
                return item.subCode == data.data
            })
            if (index >= 0) {
                radioClick(list.value[index], index)
            }
        } else if (data.type == 'showRule') {
            let index = list.value.findIndex(item => {
                return item.code == data.data
            })
            if (index >= 0) {
                radioClick(list.value[index], index)
            }
        }
    }
    defineExpose({
        init
    })

</script>


<style lang="less" scoped>
    .dropContain {
        .title {
            color: #2E3034;
            font-family: Avenir800;
            font-size: 0.18rem;
            font-weight: 800;
            margin-bottom: 0.05rem;
            position: relative;
        }

        .valBox:hover {
            cursor: pointer;
        }

        .valBox {
            border-radius: 0.04rem;
            border: 0.01rem solid #B8C4D1;
            color: #313A68;
            font-family: Avenir500;
            font-size: 0.14rem;
            font-weight: 500;
            position: relative;

            .downIcon {
                width: 0.12rem;
                height: 0.07rem;
                margin-right: 0.25rem;
            }

            .values {
                width: 100%;

                &-part {
                    height: 0.19rem;
                    padding: 0.07rem 0.05rem;
                    border-radius: 0.04rem;
                    background: #EDF4FC;
                    color: #313A68;
                    font-family: Avenir500;
                    font-size: 0.14rem;
                    font-style: normal;
                    font-weight: 500;
                    margin-left: 0.1rem;
                    position: relative;

                    .del {
                        position: absolute;
                        width: 0.1rem;
                        height: 0.1rem;
                        top: 0;
                        right: 0;
                        transform: translate(50%, -50%)
                    }
                }
            }

            .dropList {
                z-index: 99;
                position: absolute;
                left: 0;
                margin-top: 0.04rem;
                display: flex;
                flex-direction: column;
                width: 100%;
                background: #FFF;
                overflow: hidden;
                border-radius: 0.04rem;
                box-shadow: 0px 0.04rem 0.18rem 0px rgba(20, 29, 75, 0.25);
                max-height: 3rem;
                overflow-y: auto;

                &-part {
                    width: 100%;
                    height: 0.5rem;
                    line-height: 0.5rem;
                    padding-left: 0.15rem;
                    box-sizing: border-box;
                    color: #666;
                    font-family: Avenir500;
                    font-size: 0.14rem;
                    font-weight: 500;
                    text-align: left;
                }

                .active {
                    color: #506CFF;
                }

                .dropList-part:hover {
                    cursor: pointer;
                    background-color: #506CFF;
                    color: #fff;
                }

            }
        }
    }
</style>